import React, { Component } from 'react'

export default class FormCom extends Component {
  //声明 login 方法
  login = (e) => {
    //阻止默认行为, 建议放在事件回调的上面
    e.preventDefault();
    //获取表单元素的值
    let username = this.user.value;
    let password = this.pass.value;
    //控制台输出
    console.log(`用户名为: ${username} 密码为: ${password}`);
  }

  reset = e => {
    e.preventDefault();
    this.user.value = '';
    this.pass.value = '';
  }

  render() {
    return (
      <form>
        <h2>用户登录</h2>
        <hr />
        用户名: <input type="text" ref={el => this.user = el} /><br />
        密码: <input type="password" ref={el => this.pass = el} /><br />
        <hr />
        <button onClick={this.login}>登录</button>
        <button onClick={this.reset}>重置</button>
      </form>
    )
  }
}
